<!-- 收益详情 -->
<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" class="yield" v-if="isshow">
		<view class="box" slot="top">
			<view class="bg">
				<!-- #ifdef APP-PLUS -->
				<Header title="收益详情" :isShowRight="false" @back="back" />

				<view style="height:75rpx"></view>
				<!-- #endif -->
				<view class="top" :class="{ h396: current == 'yj' }">
					<view class="btns">
						<view class="left" :class="{ current: current == 'pt' }" @click="changeCurrent('pt')">普通收益</view>
						<view class="right" :class="{ current: current == 'yj' }" @click="changeCurrent('yj')">佣金收益</view>
					</view>

					<view class="time" v-if="current == 'pt'">
						会员时长获得
						<text class="num">{{ info.vipNum }}</text>
						<text class="gray">天</text>
					</view>

					<view class="money" v-else>
						<view class="center">
							<view class="money1">
								<view class="money_top">￥{{ info.shareValidIncome }}</view>
								<view class="text">我的收益</view>
							</view>
							<view class="money2">
								<view class="money_top">￥{{ info.shareTotalIncome }}</view>
								<view class="text">累计收益</view>
							</view>
							<view class="money3">
								<view class="money_top">￥{{ info.totalCashMoney }}</view>
								<view class="text">累计提现</view>
							</view>
						</view>
						<view class="subs">
							<view @click="goPage(1)">提现记录</view>
							<view class="subs_right" @click="goPage(2)">提现</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="info">
			<view class="title">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img8.png"></image>
				<view>分享订单({{ current == 'yj' ? info.moneyOrderNum : info.vipOrderNum }})</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="left">
						<avatar class="avatar" :src="item.headPortrait"></avatar>
						<view>
							<view>{{ item.nickName }}</view>
							<view class="time">{{ item.createTime }}</view>
						</view>
					</view>
					<view class="right" v-if="current == 'pt'">+{{ item.vipDay }}天</view>
					<view class="right" v-else>+{{ item.incomeMoney }}</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import { incomeDetails, incomeMoneyList, incomeVipList } from '@/apis/apis.js';
import Header from '@/components/c_header.vue';
import avatar from '@/components/avatar.vue';
export default {
	components: {
		Header,
		avatar
	},
	data() {
		return {
			showImg: false,
			info: {},
			current: 'pt', //顶部切换current
			dataList: [],
			isshow: false
		};
	},
	onLoad(options) {
		this.init();
		this.current = options.current ? options.current : 'pt';
	},
	onShow() {
		this.init();
		this.isshow = true;
	},
	onHide() {
		this.isshow = false;
	},
	methods: {
		init() {
			incomeDetails().then(res => {
				console.log(res);
				this.info = res.data;
			});
		},
		changeCurrent(e) {
			this.current = e;
			this.queryList();
		},
		queryList(pageNo, pageSize) {
			if (this.current == 'pt') {
				incomeVipList({
					pageNum: pageNo,
					pageSize: pageSize
				}).then(res => {
					console.log('普通订单（会员）', res);
					this.$refs.paging.complete(res.data);
				});
			} else if (this.current == 'yj') {
				incomeMoneyList({
					pageNum: pageNo,
					pageSize: pageSize
				}).then(res => {
					console.log('佣金订单（钱）', res);
					this.$refs.paging.complete(res.data);
				});
			}
		},
		goPage(text) {
			// let url;
			// url = text == 'tx' ? './cash?type=' + 1 +'&isBack2=true': './record?type=' + 1;
			// uni.navigateTo({
			// 	url
			// })
			if (text == 1) {
				//提现记录
				uni.navigateTo({
					url: './record?type=' + 1
				});
			}
			if (text == 2) {
				if (this.info.shareValidIncome !== 0) {
					//提现页面
					uni.navigateTo({
						url: './cash?type=' + 1 + '&isBack2=true'
					});
				} else {
					uni.showToast({
						title: '该收益为0，不能提现',
						icon: 'none'
					});
					return;
				}
			}
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.yield {
	background-color: #eff1f3;

	.bg {
		background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/yield/bg1.png') no-repeat 100% -2rpx;
		background-size: cover;
		padding: 30rpx 28rpx 0 30rpx;

		.top {
			width: 692rpx;
			height: 282rpx;
			background-color: #fff;
			border-radius: 30rpx;

			/* #ifdef APP-PLUS */
			margin-top: 76rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			margin-top: 40rpx;
			/* #endif */
			.money {
				margin: 52rpx 0 40rpx;
				padding: 0 38rpx;

				.center {
					display: flex;
					justify-content: space-between;
					text-align: center;

					.money_top {
						margin-bottom: 20rpx;
						font-size: 44rpx;
						font-family: DIN;
						font-weight: 500;
						color: #ff8809;
					}

					.text {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #787a83;
					}
				}

				.subs {
					display: flex;
					justify-content: space-between;
					text-align: center;
					margin-top: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #194FC9;

					view {
						width: 256rpx;
						height: 70rpx;
						background: #ffffff;
						border: 2rpx solid #194FC9;
						border-radius: 36rpx;
						line-height: 70rpx;
					}

					.subs_right {
						background-color: #194FC9;
						color: white;
					}
				}
			}

			.btns {
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				text-align: center;
				background-color: #f3f5f7;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #545654;
				position: relative;
				height: 82rpx;
				border-radius: 30rpx 30rpx 0 0;

				& > view {
					width: 50%;
					text-align: center;
					height: 82rpx;
					line-height: 82rpx;
					position: absolute;
				}

				.right {
					right: 0;
				}

				.current {
					transform: scale(1, 1.2);
					height: 100rpx;
					border-radius: 30rpx 30rpx 0 0px;
					background-color: white;
					font-weight: bold;
					color: #000000;
					top: -10rpx;
				}
			}

			.time {
				margin: 44rpx auto 0;
				width: 616rpx;
				height: 118rpx;
				padding-left: 28rpx;
				background: rgba(255, 155, 38, 0.1);
				border-radius: 20rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #2f2f2f;
				display: flex;
				align-items: center;

				.num {
					font-size: 60rpx;
					font-family: DIN Alternate;
					font-weight: bold;
					color: #ff8809;
					margin: 0 26rpx 16rpx;
				}

				.gray {
					color: #989898;
				}
			}
		}

		.h396 {
			height: 396rpx;
		}
	}

	.info {
		padding: 30rpx 30rpx 54rpx;

		.title {
			display: flex;
			align-items: center;
			margin: 28rpx 0;

			image {
				width: 28rpx;
				height: 14rpx;
				margin-right: 10rpx;
			}
		}
		.content {
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 28rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 42rpx 26rpx;
				border-bottom: 2rpx solid #f2f2f2;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;

				.avatar {
					width: 78rpx;
					height: 78rpx;
					margin-right: 22rpx;
					border-radius: 50%;
				}
			}

			.left {
				display: flex;
				align-items: center;

				.time {
					color: #acacac;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #194FC9;
			}
		}
	}
}
</style>
